<template>
  <view class="page-default">
    <c-nav-bar title="迎新指南" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view>
      <view class="mb-26">
        <view class="relative h-full w-full">
          <image class="absolute left-2 h-18 w-60 -top-20" src="/static/images/welcome/title.png" mode="aspectFit" />
          <image src="/static/images/welcome/person.png" mode="aspectFit" class="absolute right-6 h-24 w-24 -top-18" />
        </view>
      </view>
      <!-- content -->
      <view class="content bg-gradient mt-6 rounded-4 pb-8 pt-10 line-height-6">
        <view class="g-border relative mx-6 mt-4 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              01
            </text>
            <text class="title-name rounded-r-8 font-bold">
              注册登录
            </text>
          </view>
          <view class="my-10">
            凭考生手机号码及身份证后6位，快捷登录线上迎新系统。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-1.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>

        <view class="g-border relative mx-6 mt-12 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              02
            </text>
            <text class="title-name rounded-r-8 font-bold">
              查看报到须知
            </text>
          </view>
          <view class="my-10">
            查看迎新指南及温馨提示，在这里学校会告知您入校报道所需物品及办理流程。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-2.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>

        <view class="g-border relative mx-6 mt-12 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              03
            </text>
            <text class="title-name rounded-r-8 font-bold">
              信息查询
            </text>
          </view>
          <view class="my-10">
            在信息查询处可查询您的班级、学号、教室、宿舍号、班主任等关键信息。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-3.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>

        <view class="g-border relative mx-6 mt-12 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              04
            </text>
            <text class="title-name rounded-r-8 font-bold">
              特殊体质
            </text>
          </view>
          <view class="my-10">
            提前申报特殊体质，确保您在学校期间享受更贴心的关怀。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-4.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>

        <view class="g-border relative mx-6 mt-12 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              05
            </text>
            <text class="title-name rounded-r-8 font-bold">
              社团与特长
            </text>
          </view>
          <view class="my-10">
            提前了解学校社团风采，积极填报个人特长，相信未来您定能在校园舞台上绽放耀眼的光芒。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-5.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>

        <view class="g-border relative mx-6 mt-12 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              06
            </text>
            <text class="title-name rounded-r-8 font-bold">
              宿舍报到
            </text>
          </view>
          <view class="my-10">
            入校后，到宿舍楼一键扫码确认报到，整理床铺。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-6.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>

        <view class="g-border relative mx-6 mt-12 border-2 border-dashed px-4">
          <view class="absolute -left-1 -top-4">
            <text class="title-num font-bold">
              07
            </text>
            <text class="title-name rounded-r-8 font-bold">
              班级注册
            </text>
          </view>
          <view class="my-10">
            根据指引进入班级，扫码一键确认班级报到，并根据班主任要求完成班级注册。
          </view>
          <view class="relative mx-auto mb-6 max-w-lg w-full">
            <img src="/static/images/welcome/guide-7.png" class="h-auto w-full rounded-lg object-cover shadow-md">
          </view>
        </view>
      </view>
    </view>
    <FooterInfo class="py-6" />
  </view>
</template>

<script lang="ts" setup>
import FooterInfo from './footer.vue';
</script>

<style lang="scss" scoped>
:deep(uni-page-body) {
  background-color: #f5f9fc !important;
}

.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;

}

.bg-gradient {
  background: linear-gradient(to bottom, #E7F6EA, #F5F9FC);
}

.g-border {
  border-color: #02CAB1;
}

.title-num {
  padding: 5px 15px 6px 15px;
  background-color: #F0CD42;
  color: #997F24;
}

.title-name {
  padding: 5px 20px 6px 20px;
  background-color: #3AA69B;
  color: #FFFFFF;
}
</style>
